<div class="modal-header bg-light-grey">
    <div class="pull-left">
        <h4 class="no-margin">Remote consumers</h4>
        <p class="help-block">
            Loaded {{consumers.length}} unique consumers form the remote storage.<br>
            Select the ones you want to import.
        </p>
    </div>

    <a  class="modal-close pull-right" style="margin-top: 10px" ng-click="closeModal()">
        <i class="mdi mdi-close"></i>
    </a>
</div>
<div class="modal-body">

    <div class="actions no-margin">
        <div class="form-group col-md-6 no-padding-left">
            <input type="text" data-ng-model="searchText" class="form-control" placeholder="search consumers...">
        </div>
        <button type="submit" data-ng-disabled="busy" class="btn btn-sm btn-warning btn-link" data-ng-click="importChecked()">
            <i class="mdi mdi-download"></i>
            import selected
        </button>
        <button type="submit" data-ng-disabled="busy" class="btn btn-sm btn-primary  btn-link" data-ng-click="importAll()">
            <i class="mdi mdi-download"></i>
            import all
        </button>
    </div>
    <div class="clearfix"></div>
    <div class="actions no-margin padding-top">
        <dir-pagination-controls></dir-pagination-controls>
    </div>
</div>
<table class="import-consumers-table table table-hover table-striped no-margin">
    <tr>
        <th width="1"></th>
        <th>username</th>
        <th>custom_id</th>
    </tr>
    <tr
            dir-paginate="item in consumers | itemsPerPage: 50 | filter : searchText">
        <td>
            <input class="padding-left" ng-disabled="item.exists" type="checkbox" ng-model="item.checked"/>
        </td>
        <td>{{item.username}}</td>
        <td>{{item.custom_id}}</td>
    </tr>
</table>
<div class="modal-body">

    <div class="actions no-margin">
        <dir-pagination-controls></dir-pagination-controls>
    </div>


    <div class="actions no-margin padding-top">
        <button type="submit"
                data-ng-disabled="busy"
                data-ng-click="importChecked()"
                class="btn btn-warning">
            <i class="mdi mdi-download"></i>
            import selected
        </button>
        <button type="submit"
                data-ng-disabled="busy"
                data-ng-click="importAll()"
                class="btn btn-primary">
            <i class="mdi mdi-download"></i>
            import all
        </button>
    </div>
</div>